nav.navigation{
    position: relative;
    margin:2%;
    width:auto;
    height: auto;
    border: 2px solid #c5d7f1;
    border-radius: 10px;
    background: #c5d7f1;
    transition: all .3s;
    cursor: pointer;
}

nav.navigation::before,
nav.navigation::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 2px solid gold;
    transition: all .5s;
    animation: clippath 3s infinite linear;
    border-radius: 10px;
    z-index:0;
}

nav.navigation::after {
    animation: clippath 3s infinite -1.5s linear;
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 98% 0);
    }

    25% {
        clip-path: inset(0 98% 0 0);
    }
    50% {
        clip-path: inset(98% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 98%);
    }
}

1. nav.navigation：這是CSS選擇器，用於選中擁有"class"屬性為"navigation"的<nav>元素。這個<nav>元素代表導航欄。

2. position: relative;：設置導航欄的定位為相對定位，以便在內部的絕對定位元素可以參考它的位置。

3. margin: 2%;：設置導航欄的外邊距為2%。

4. width: auto; 和 height: auto;：設置導航欄的寬度和高度為自動調整，根據內容自動計算。

5. border: 2px solid #c5d7f1;：設置導航欄的邊框為2像素寬的實線邊框，顏色為#c5d7f1。

6. border-radius: 10px;：設置導航欄的圓角半徑為10像素，使其具有圓角外觀。

7. background: #c5d7f1;：設置導航欄的背景顏色為#c5d7f1。

8. transition: all .3s;：設置所有屬性的變化都具有0.3秒的過渡效果，當導航欄的狀態發生變化時，變化將平滑進行。

9. cursor: pointer;：將滑鼠游標設置為手型，以指示導航欄可以點擊。

10. nav.navigation::before 和 nav.navigation::after：這是使用伪元素 ::before 和 ::after 選擇器來為導航欄添加兩個外框的部分。它們將被用來創建一個特殊的效果。

11. content: "";：設置伪元素的內容為空，這是必需的。

12. position: absolute;：將伪元素的定位設置為絕對定位，使它們可以獨立於導航欄進行定位。

13. top: -3px;、left: -3px;、right: -3px; 和 bottom: -3px;：設置伪元素的位置，使它們稍微大於導航欄的邊界。

14. border: 2px solid gold;：設置伪元素的邊框為2像素寬的實線邊框，顏色為金色。

15. animation: clippath 3s infinite linear;：設置伪元素的動畫效果，使用名為clippath的關鍵幀動畫，持續3秒，無限循環，線性運動。

16. border-radius: 10px;：設置伪元素的圓角半徑為10像素，使其具有圓角外觀。

17. z-index: 0;：設置伪元素的堆疊順序，使其處於其他元素的下方。

18. @keyframes clippath：這是一個CSS關鍵幀動畫，定義了clippath動畫的關鍵幀。這個動畫會改變伪元素的 clip-path 屬性，從而創建一個動畫效果。

目前製作成果：

黃色的邊匡動畫會不斷繞著導覽列轉